<template is="msgItem1">
	<view class="content">
		
		<view class="upload-example">
			<view class="title">{{hb.desc}}</view>
			<img class="upload-img" :src="url + hb.pic" alt="">
		</view>
		
		<view class="already">已领{{hb.r_num}}/{{hb.num}}个，剩余{{num}}个/{{hb.money}}元</view>
		
		
		
		<view class="resources">——  领取详情  ——</view>
		
		<view class="receive-list" v-for="(vo,index) in hb.sub" :key="index">
			<view class="top">
				<view class="user-info">
					<img :src="vo.avatar" alt="">
					<view class="name">{{vo.nick}}</view>
				</view>
				<view class="right-money"><!-- <view class="hot">手气最佳</view> --><view class="money">{{vo.receive}}元</view></view>
			</view>
			
			<view class="user-up-img">
				<img :src="url + vo.r_pic">
			</view>
			
			<view class="time-bottom">
				<view class="time">{{vo.ctime}}</view>
				<view class="good"><img src="/static/zan.png">{{vo.praise}}</view>
			</view>
			
		</view>
		
		<view style="height: 100rpx;"></view>
		<view class="too-receive" @click="gotoshare"><img src="/static/buttonhb.png"><view>分享红包</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number_min:"1",
				number_max:"10",
				money_min:"9",
				money_max:"30.53",
				
				user_money:"12.02",
				id:"",
				hb:"",
				num:"",
				url:""
			}
		},
		onLoad(options) {
			var _self = this
			_self.url = _self.$url
			try {
			    const value = uni.getStorageSync('userinfo');
				const hbinfo = uni.getStorageSync('hbinfo');
			    if (value) {
			        _self.token = value.token
			    }
				if(hbinfo){
					_self.imgtitle = hbinfo.imgtitle
					_self.imgurl = hbinfo.img
				}
			} catch (e) {
			    // error
			}//获取图片信息
			
			
			_self.id = options.id
			console.log(_self.id)
			uni.request({
			    url: _self.$url + '/api/lucky_money/luckyMoneyDetail', 
				method:"post",
			    data: {
			       id:_self.id
			    },
				header: {
					'token': _self.token 
				},
			    success: (res) => {
					_self.hb = res.data.result.data
					_self.num = _self.hb.num - _self.hb.r_num
					console.log(_self.hb)
			    }
			});
			
		},
		methods: {
			gotoshare(){
				var _self = this
				uni.navigateTo({
				    url: '/pages/index/share?id=' + _self.id,
				    animationType: 'pop-in',
				    animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	body{
		background: #F3F3F3;
		font-size: 14px;
	}
	view{
		box-sizing: border-box;
	}
	.upload-example{
		width: 90%;
		box-sizing: border-box;
		margin:50rpx auto;
		background: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin:40rpx 0 40rpx 0;
			font-size: 16px;
		}
		.upload-img{
			width: 400rpx;
			height: 400rpx;
			margin-bottom:40rpx;
		}
		.onclickimg{
			width: 400rpx;
			height: 400rpx;
			margin-bottom:40rpx;
		}
	}
	.already{
		width: 100%;
		margin:40rpx 0;
		text-align: center;
	}
	.already-receive{
		width: 90%;
		height: 320rpx;
		margin:0 auto;
		background: url(../../static/receive.jpg) no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.money{
			color:#FFE0AA;
			font-size: 30px;
			font-weight: bold;
		}
		.describe{
			color:#FFC36A;
			font-size: 14px;
			margin-top:10rpx;
		}
	}
	.resources{
		width: 100%;
		text-align: center;
		color:#C4C4C4;
		margin-top:100rpx;
		margin-bottom: 40rpx;
	}
	.receive-list{
		padding:25rpx;
		background: #fff;
		border-radius: 5px;
		width: 90%;
		margin:0 auto 30rpx auto;
		.top{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			img{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.user-info{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.name{
				margin-left: 25rpx;
			}
			.right-money{
				display: flex;
				flex-direction: row;
				align-items: center;
				.hot{
					margin-right: 20rpx;
					color:#F4313E;
				}
				.money{
					color:#333333;
					font-weight: bold;
				}
			}
		}
		
		.user-up-img{
			padding:25rpx 0;
			img{
				width: 400rpx;
				height: 400rpx;	
			}
		}
		.time-bottom{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			color:#999999;
			img{
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}
		}
	}
	.too-receive{
		position: fixed;
		width: 100%;
		bottom:0px;
		padding:25rpx 0;
		background: #F4313E;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color:#fff;
		img{
			width: 50rpx;
			height: 50rpx;
			margin-right: 15rpx;
		}
	}
	
</style>
